<template>
  <div class="mine">
    <div class="head">饿了么</div>
    <div class="tou">
      <div class="xiang"></div>
      <div class="zhang">
        <h4>7a9aa5a077a</h4>
        <p>136****9070</p>
      </div>
      <div class="you">账号设置</div>
    </div>
    <div class="ka">
      <div class="chi">吃货卡 | 吃货豆:1461</div>
      <p>升级超级吃货卡，每月得无门槛红包，下单5倍返吃货豆</p>
    </div>
    <div class="hongbao">
      <div class="hong">
        <h4>红包</h4>
        <p>7张今日到期</p>
      </div>
      <div class="yu">
        <h4>余额</h4>
        <p>0元</p>
      </div>
    </div>
    <div class="block">
      <div class="title">常用工具</div>
      <div class="list">
        <div class="btn" @click="toAddress">
          <van-icon name="location-o" size="24" />
          <span>我的地址</span>
        </div>
        <div class="btn">
          <van-icon name="service-o" size="24" />
          <span>我的客服</span>
        </div>
        <div class="btn" @click="toCollect">
          <van-icon name="like-o" size="24" />
          <span>店铺关注</span>
        </div>
        <div class="btn">
          <van-icon name="star-o" size="24" />
          <span>评价有礼</span>
        </div>
      </div>
    </div>
    <div class="huodong">
      <div class="hbox" v-for="(v,i) in str" :key="i">
        <p>{{v.si}}</p>
        <span>{{v.pp}}</span>
        <img :src="v.img" alt="">
        <button>{{v.samllbox}}</button>
      </div>
    </div>
  </div>
</template>

<script>
var img1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.3png.com%2Fcf9a9f5ceaf26474749f5918a5aecddbc481.png&refer=http%3A%2F%2Fimg2.3png.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668612189&t=daf37e77feaea2c546e5c5ccee34946f";
var img2 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.puchedu.cn%2Fuploads%2F2%2F253%2F4066941045%2F2598058035.jpg&refer=http%3A%2F%2Fimg.puchedu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668612307&t=ac4541058ae26935636ddbc571b57e30";
export default {
  data(){
     return {
      str:[
        {si:"邀好友赚现金",pp:"最高得15元",samllbox:"去邀请",img:img1},
        {si:"饿了么服务号",pp:"关注后及时接收系统通知",samllbox:"立即关注",img:img2}
        ]
     }
  },
  methods: {
    toCollect() {
      this.$router.push("/collect");
    },
    toAddress() {
      this.$router.push("/address");
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  background-color: #f5f5f5;
  .head {
    height: 45px;
    margin: 10px;
    line-height: 45px;
    background-color: white;
  }
  .tou {
    height: 100px;
    display: flex;
    margin: 0 10px;
    align-items: center;
    justify-content: space-between;
    // background-color: aqua;
  }
  .tou .xiang {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(77, 159, 236);
    margin: 5px 10px;
  }
  .tou .you {
    width: 95px;
    height: 30px;
    border-radius: 20px;
    border: solid 1px #ccc;
    text-align: center;
    line-height: 30px;
    // background-color: chartreuse;
  }
  .ka {
    width: 95%;
    height: 80px;
    background-color: skyblue;
    color: #fff;
    margin: 10px auto;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
  }
  .ka .chi {
    font-size: 18px;
  }
  .ka p {
    font-size: 13px;
    margin-bottom: 5px;
  }
  .hongbao {
    width: 95%;
    height: 120px;
    background-color: #f0f0f0;
    margin: auto;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .hongbao .hong {
    width: 47.5%;
    height: 120px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    // background-color: chartreuse;
  }
  .hongbao .hong p {
    font-size: 14px;
    color: rgb(139, 145, 145);
  }
  .hongbao .yu {
    width: 47.5%;
    height: 120px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .hongbao .yu p {
    font-size: 14px;
    color: rgb(139, 145, 145);
  }
  .huodong {
    height: 280px;
    margin: 0 10px;
    display: flex;
    justify-content: space-around; 
    // background-color: aqua;
    .hbox {
      width: 45%;
      height: 280px;
      display: flex;
      flex-direction:column;
      justify-content: space-around;
      align-items: center;
      // background-color: chartreuse;
      p{
        font-weight: 700;
      }
      span{
        font-size: 13px;
        color: gray;
      }
      img{
        width: 50px;
        height: 50px;
        background-color: brown;
      }
      button{
        width: 100px;
        height: 35px;
        border-radius: 20px;
        border: none;
      }
    }
  }
}
.block {
  margin: 10px;
  background-color: white;
  .title {
    font-weight: bold;
    padding-left: 10px;
  }
  .list {
    display: flex;
    justify-content: space-around;
    align-content: center;
    .btn {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      i {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
